<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择人员</title>
</head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<%@ include file="/WEB-INF/jsp/kt/common/inc.jsp" %>
<script type="text/javascript" src="${_resources}js/jquery.ztree.core.js"></script>
<link rel="stylesheet" href="${_resources}css/zTreeStyle.css" type="text/css">
<link href='${_resources}css/style.css' type='text/css' rel='stylesheet' />
<link rel="stylesheet" href="${_resources}css/reset.css" type="text/css" />
<%-- <script type="text/javascript" src="${_resources}js/zUI.js"></script> --%>
<style type="text/css">
    .ztree li span.button{width:0px;}
    .selectPersonnel_select2 input{
filter:alpha(opacity=0);  /* ie 有效*/
	-moz-opacity:0; /* Firefox  有效*/
	opacity: 0; /* 通用，其他浏览器  有效*/}
	.ztree{color:#999}
	.ztree li span{color:#999}
	.selectPersonnel{width:680px;
            height:190px;
            overflow:hidden;}
        .main_left{width:140px;
        height:200px!important;}
        .zUIpanelScrollBox,.zUIpanelScrollBar{
			width:5px;
			top:4px;
			right:2px;
			border-radius:5px;
			display:block;
		}
		.zUIpanelScrollBox{
			background:#c5c5c5;opacity:0.3;
			filter:alpha(opacity=30);
		}
		.zUIpanelScrollBar{
			background:#c5c5c5;opacity:0.8;
			filter:alpha(opacity=80);
		}
	.main_right {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    height: 100%;
    width: 486px;
}
.ztree {margin-left: 12px;max-width:120px;}
.main_right{border-left:0px}
.selectPersonnel_div2{width: 318px;}
.selectPersonnel_select1{margin-left: 7px;}
.selectPersonnel_div4{width: 125px;}
.selectPersonnel_select2{margin-left: 0px;min-width: 142px;text-align: center;}
.selectPersonnel_select1 p, .selectPersonnel_select2 p{margin: 6px;}
.selectPersonnel_div1{font-size: 16px;text-align: center;}
</style>
<script type="text/javascript">
if (!Array.prototype.indexOf){  
    Array.prototype.indexOf = function(elt /*, from*/){  
    var len = this.length >>> 0;  
    var from = Number(arguments[1]) || 0;  
    from = (from < 0)  
         ? Math.ceil(from)  
         : Math.floor(from);  
    if (from < 0)  
      from += len;  
    for (; from < len; from++)  
    {  
      if (from in this &&  
          this[from] === elt)  
        return from;  
    }  
    return -1;  
  };  
}
var userListHtml="";
var userIdList="";
var userNameList="";
var selectUserList = [];
var managerIdSplit = "";
var checkedHtml = "";
var projectId = "${projectId}";
$(function (){
	var projectInnerIds = "${projectInnerIds}";
	managerIdSplit = projectInnerIds.split(",");
	
	$("#close").click(function (){
		parent.closeWin();
	});
	$("#delFun").click(function (){
		parent.closeWin();
	});
	
	$("#searchValue").keydown(function(event) {//给输入框绑定按键事件
	    if(event.keyCode == "13") {//判断如果按下的是回车键则执行下面的代码
	    	search();
	  	}
	})
	
	$("#search").click(function (){
		search();
	});
});

function search(value){
	$("#selectUser").empty();
	//获取选择的目录：
	var path="${_baseUrl}/documentProjectInnerUserController/selectProjectInnerUser";
 	 $.ajax({    
		type: "post",    
		async: false,    
		url:path,   
		data:{
			"value":value,
			"projectId":projectId
		},    
		dataType:"json",    
		success: function (data) { 
			var obj = JSON.stringify(data);
		    innerHtml="";
		    if(obj=="[]"){
				innerHtml+=""; 
			}else{  
				for(var i=0;i<data.length;i++){	
					if(selectUserList.toString().indexOf(data[i].userId) !=-1){
						var html = "<p class=\"pick\"  id='p_"+data[i].userId+"'><input type='hidden' id='"+data[i].userId+"' name='"+data[i].userId+"' value='"+data[i].userId+"'/><input type='hidden' id='userName' name='userName' value='"+data[i].userName+"'/>"+data[i].userName+"</p>";
				 		$("#selectUser").append(html);
					}
					if(managerIdSplit.indexOf(data[i].id) >= 0){
						innerHtml+="<p class=\"pick\" ><input class='chk_all' checked='checked' name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
						//判断如果右侧已存在，则不需要在加入
						
					}else{
					   innerHtml+="<p><input class='chk_all' name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
					}
				}
			}                 
		    $("#userList").children("p").remove();
			$("#userList").append(innerHtml); 
		}	
	});
}
$(function (){
	onClick();
	if($(".zzjgs_sorll").size()>0){
		$('.zzjgs_sorll').jScrollPane();
	}
	if($(".mulu_jieg").size()>0){
		$('.mulu_jieg').jScrollPane();
	}
	
});

 if (!Array.prototype.indexOf){  
        Array.prototype.indexOf = function(elt /*, from*/){  
        var len = this.length >>> 0;  
        var from = Number(arguments[1]) || 0;  
        from = (from < 0)  
             ? Math.ceil(from)  
             : Math.floor(from);  
        if (from < 0)  
          from += len;  
        for (; from < len; from++)  
        {  
          if (from in this &&  
              this[from] === elt)  
            return from;  
        }  
        return -1;  
      };  
    }  
function onClick(){
	var path="${_baseUrl}/documentProjectInnerUserController/selectProjectInnerUser";
 	 $.ajax({    
		type: "POST",    
		async: false,    
		url:path,   
		data:{
			"projectId":projectId    
		},    
		dataType:"json",    
		success: function (data) {   
		    var obj = JSON.stringify(data);
		    innerHtml="";
		    if(obj=="[]"){
				innerHtml+=""; 
			}else{
				for(var i=0;i<data.length;i++){	
					if(managerIdSplit.indexOf(data[i].id) >= 0){
						innerHtml+="<p class=\"pick\"><input class='chk_all' checked='checked' name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
						//判断如果右侧已存在，则不需要在加入
						var flag = true;
						for(var ii=0;ii < selectUserList.length;ii++){
				 			var obj = JSON.parse(selectUserList[ii]);
				 			if(data[i].id == obj.id){
				 				flag = false;
				 			}
				 		}
						if(flag){
							//selectUserList = [];
							selectUserList.push("{\"userId\":\""+data[i].userId+"\",\"userName\":\""+data[i].userName+"\",\"id\":\""+data[i].id+"\"}");
					 		var html = "<p class=\"pick\" id='p_"+data[i].id+"'><input type='hidden' id='userId' name='userId' value='"+data[i].userId+"'/><input type='hidden' id='userName' name='userName' value='"+data[i].userName+"',this/><input name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"delSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
					 		$("#selectUser").append(html);
						}
						
					}else{
					   innerHtml+="<p ><input class='chk_all' name='"+data[i].id+"_chk' id='"+data[i].id+"' value='"+data[i].userName+"' type='checkBox' onClick=\"addSelectUser('"+data[i].userId+"','"+data[i].userName+"','"+data[i].id+"',this);\">"+data[i].userName+"</p>";
					}
				}
			}                 
		    $("#userList").children("p").remove();
			$("#userList").append(innerHtml); 
			//默认选中右侧已有人员
			for(var i=0;i<selectUserList.length;i++){
	 			var obj = JSON.parse(selectUserList[i]);
	 			$("#"+obj.id).attr("checked",true);
	 		}
		}   
	});
}
/* 选择一个节点添加到右侧 */
	function addSelectUser(userId,userName,id,o){
 	 $('.chk_all').each(function(){
        	$(this).change(function() { 
        		 if($(this).attr('checked')){
 	                $('.chk_all').removeAttr('checked');
 	                $(this).attr('checked','checked');
 	            }
        	}); 
	});
 	if('${inputId}' == 'projectInnerTeam' ){
	 		if($(o).is(':checked')){
	 			$(o).parent().addClass("pick");
	 		}else{
	 			$($(o).parent()).removeClass("pick");
	 		}	
	 	var userHtml = $("#selectUser").html();
		if($(o).is(':checked')){
	 		var html = "<p class=\"pick\" id='p_"+id+"'><input type='hidden' id='userId' name='userId' value='"+userId+"'/><input type='hidden' id='userName' name='userName' value='"+userName+"'/><input type='hidden' id='userName' name='userName' value='"+userName+"',this/><input name='"+id+"_chk' id='"+id+"' value='"+userName+"' type='checkBox' onClick=\"delSelectUser('"+userId+"','"+userName+"','"+id+"',this);\">"+userName+"</p>";
	 		if(userHtml.indexOf(userId)>=0){
	 			
	 		}else{
	 			if('${inputId}' == 'receiver'){
	 				selectUserList.length=0;
	 				$("#selectUser").html(""); 
	 			}
		 		selectUserList.push("{\"userId\":\""+userId+"\",\"userName\":\""+userName+"\",\"id\":\""+id+"\"}");
		 		managerIdSplit.push(id);
		 		$("#selectUser").append(html); 
	 		}	
		}else{
			for(var i=0;i<selectUserList.length;i++){
	 			var obj = JSON.parse(selectUserList[i]);
	 			if(id == obj.id){
	 				$("#p_"+id).remove();
	 				//从当前坐标开始,向后删除一个
	 				selectUserList.splice(i,1);
	 			}
	 		}
			for(var j=0;j<managerIdSplit.length;j++){
	 			if(id == managerIdSplit[j]){
	 				managerIdSplit.splice(j,1);
	 			}
	 		}
		}
 	} else{
 		if($("#"+id+":checked").val() != null){
 			if('${inputId}' == 'projectInnerManager'){
 				$("#selectUser").empty();
 				selectUserList.length=0;
 				managerIdSplit.length=0;
 				if(selectUserList.toString().indexOf(userId,userName)==-1){
 			 		selectUserList.push("{\"userId\":\""+userId+"\",\"userName\":\""+userName+"\",\"id\":\""+id+"\"}");
 			 		var html = "<p class=\"pick\" id='p_"+id+"'><input type='hidden' id='userId' name='userId' value='"+userId+"'/><input type='hidden' id='userName' name='userName' value='"+userName+"'/><input type='hidden' id='userName' name='userName' value='"+userName+"',this/><input name='"+id+"_chk' id='"+id+"' value='"+userName+"' type='checkBox' onClick=\"delSelectUser('"+userId+"','"+userName+"','"+id+"',this);\">"+userName+"</p>";
 			 		$("#selectUser").append(html); 
 			    }
 				managerIdSplit.push(id);
 			}
 			 var $this = $(o);
	         $this.parent().addClass("pick");
	         if($this.parent().siblings(".pick").length>0){
	            $this.parent().siblings(".pick").removeClass("pick");
	        }; 
		} 
 	}
}
	/* 点击右侧移除选中事件*/
 	function delSelectUser(userId,userName,id,o){
		$($("#"+id).parent()).removeClass("pick");
		for(var i=0;i<selectUserList.length;i++){
 			var obj = JSON.parse(selectUserList[i]);
 			if(id == obj.id){
 				$("#p_"+id).remove();
 				//从当前坐标开始,向后删除一个
 				selectUserList.splice(i,1);
 			}
 		}
		for(var j=0;j<managerIdSplit.length;j++){
 			if(id == managerIdSplit[j]){
 				managerIdSplit.splice(j,1);
 			}
 		}
	}
	
</script>
<body style="overflow: hidden;">
<div class="selectPersonnel">
<!-- 	<div id="selectPersonnel1" style="width:140px;height:190px;overflow:hidden;border-right:5px solid #ddd">
	    <div id="main-left" class="zTreeDemoBackground main_left" style="border:0px;overflow-x: hidden;">
	    	<div class="selectPersonnel_div1" >项目组成员</div>
	    </div>
    </div> -->
    <div id="main-right" class="main_right">
        <div class="selectbox">
        	<div id="selectPersonnel2" style="width:325px;height:190px;overflow:hidden;float:left;">
	            <div class="selectPersonnel_div2 fl">
	                <div class="selectPersonnel_div1" style="padding-left:20px;padding-right:20px;margin:0px">人员列表</div>
	                <div class="selectPersonnel_select1"   id="userList">
	                </div>
	            </div>
            </div>
            <div id="selectPersonnel3" style="width:160px;height:190px;overflow:hidden;float:left;border-left:5px solid #ddd">
	            <div class="selectPersonnel_div4 fl" >
	                <div class="selectPersonnel_div1">已选列表</div>
	                <div class="selectPersonnel_select2" size='8' id="selectUser"></div>
	            </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
/* $(function(){
	$("#selectPersonnel1").mouseover(function(){
		  $("#selectPersonnel1").css("border","0px");
		});
	$("#selectPersonnel1").panel({iWheelStep:32});
}); */
$(function(){
	$("#selectPersonnel2").mouseover(function(){
		  $("#selectPersonnel2").css("border","0px");
		});
	$("#selectPersonnel2").panel({iWheelStep:32});
});
$(function(){
	$("#selectPersonnel3").panel({iWheelStep:32});
});

	function save(){
		var inputId='${inputId}';
		var stringJson = "["+selectUserList.join(",")+"]"; 
		parent.parent.setUserIdAndName(stringJson,inputId);
		parent.parent.closeWin();
	}
</script>
</html>